<template>
	<div id="app">
		<router-view></router-view>
		<!--引入tabbar-->
		<tabbar class="footer" style="position: fixed;bottom: 0;" v-if="isShow">
			<tabbar-item link="/food">
				<img slot="icon" src="./assets/index1.png">
				<span slot="label">外卖</span>
			</tabbar-item>
			<tabbar-item show-dot link="/find">
				<img slot="icon" src="./assets/index2.png">
				<span slot="label">发现</span>
			</tabbar-item>
			<tabbar-item selected link="/order">
				<img slot="icon" src="./assets/index3.png">
				<span slot="label">订单</span>
			</tabbar-item>
			<tabbar-item badge="2" link="/user">
				<img slot="icon" src="./assets/index4.png">
				<span slot="label">我的</span>
			</tabbar-item>
		</tabbar>
	</div>
</template>

<script>
	//导入组件
	//变量结构赋值
	import { Tabbar, TabbarItem } from 'vux'

	// 导入总线
	import bus from './bus.js'
	
	export default {
		name: 'app',
		data() {
			return {
					isShow:true
			}
		},
		components: {
			//注册组件
			Tabbar,
			TabbarItem
		},
		created() {
			bus.$on('tell-show', (value) => {
				this.isShow = value
			})
		}
	}
</script>

<style lang="less">
	@import '~vux/src/styles/reset.less';
	body {
		background-color: #fbf9fe;
	}
</style>